<script setup>
import BasicSlot from './BasicSlot.vue'
import NameSlot from "./NameSlot.vue"
import ScopeSlot from "./ScopeSlot.vue";
</script>

<template>
  <div class="box">
<!--    <BasicSlot>-->
<!--      <template v-slot:default>-->
<!--        <p>This is the default slot content.</p>-->
<!--      </template>-->
<!--    </BasicSlot>-->

<!--    <NameSlot>-->
<!--      <template v-slot:header>-->
<!--        <h1>This is the header</h1>-->
<!--      </template>-->
<!--      <template v-slot:default>-->
<!--        <p>This is the default content.</p>-->
<!--      </template>-->
<!--      <template v-slot:footer>-->
<!--        <p>This is the footer</p>-->
<!--      </template>-->
<!--    </NameSlot>-->
    <scope-slot>
      <template v-slot:default="slotProps">
        <p>User Name: {{ slotProps.user.name }}</p>
        <p>User Age: {{ slotProps.user.age }}</p>
      </template>
    </scope-slot>

  </div>
</template>

<style scoped>
.box {
  width: 100vw;
  height: 400px;
  background-color: greenyellow;
}
</style>
